<template>
  <router-link to="/transaction" style="text-decoration: none">
  <div class="transaction">
    <el-image :src="trade"></el-image>
    <div class="quick-buy">快捷购买</div>
    <div>
      <img :src="now" alt="">
    </div>
  </div>
  </router-link>
</template>

<script setup>
import trade from '@/assets/transaction/badge-tm-fill.svg'
import now from '@/assets/transaction/arrow-bar-right.svg'
</script>

<style scoped>
.transaction {
  width: 97%;
  height: 40px;
  background-color: #f1cb99;
  display: flex;
  align-items: center; /* 垂直居中 */
  padding: 0 20px; /* 简化padding */
  cursor: pointer;
}
.transaction:hover{
  background-color: #9c6ccb;
}
el-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 10px; /* 调整间距 */
}
.quick-buy {
  font-size: 20px;
  color: #103457;
  margin: 0 10px; /* 调整间距 */
  flex-grow: 1; /* 使文本占据剩余空间 */
}
img {
  height: 24px; /* 统一高度 */
  width: 24px; /* 统一宽度 */
  object-fit: contain;
}
</style>